<template>
	<view class="container">
		<view class="header-box">
			<image class="header-img" src="https://wechat-pictures-1301970825.file.myqcloud.com/shop.png"></image>
			<view>门店名称：{{info.shopName || '--'}}</view>
		</view>
		<!-- 商品详情 - start -->
		<view class="item">
			<view class="item-top">
				<view class="top-status">订单商品</view>
				<view v-if="info.policyId > 0" class="tc-button">套餐</view>
			</view>
			<view class="good" v-for="(item,index) in info.goodsList">
				<view class="good-content">
					<image class="good-img" :src="item.goodsImg"></image>
					<view class="good-info">
						<view class="good-title-box">
							<view class="good-title">{{item.goodsName}}</view>
						</view>
						<view class="good-price">
							<view class="good-danwei">单位：{{item.goodsUnit}}</view>
							<view class="good-price-value">单价：¥ {{item.unitPrice}}</view>
						</view>
						<view class="good-num">商品数量：{{item.goodsNumber}}</view>
					</view>
				</view>
				<view class="good-z-price">
					<view class="goods-price-title">商品总价：</view>
					<view class="goods-price-price">{{item.salePrice}}元</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 - end -->
		<!-- 套餐数量 -->
		<view v-if="info.policyId > 0" class="price-box">
			<view class="price-title">购买套餐数量</view>
			<view class="price-num">{{info.policyNum || '--'}}</view>
		</view>
		<!-- 价格 -->
		<view class="price-box">
			<view class="price-title">订单应收款</view>
			<view class="price-num">{{info.tolCollectedMoney || '--'}}元</view>
		</view>
		<!-- 选择优惠券和积分 -->
		<view v-if="info.hasAchievement === 1" class="item">
			<view class="item-top">
				<view class="top-status">订单商品</view>
			</view>
			<view class="select-item-box">
				<view class="price-title">优惠券：</view>
				<view v-if="info.couponList.length>0" @click="showSelectCoupon()" class="mail-num-text">
					<text v-if="selectCouponData !== ''">-{{selectCouponData.couponAmount}}元 ></text>
					<view class="select-icon-box" v-else>
						<view>请选择优惠券</view>
						<image class="select-icon" src="https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/icon_into.png"></image>
					</view>
				</view>
				<view v-else>暂无可用优惠券</view>
			</view>
			<view class="select-item-box">
				<view class="price-title">积分：</view>
				<view class="input-box">
					<view class="info-input-border">
						<input @input="authIntegral()" v-model="selectIntegral" type="number" style="height: 72upx;line-height: 72upx;" class="uni-input" placeholder="请输入抵扣积分数量" />
					</view>
					<view class="price-title" style="padding-left: 15upx;">积分</view>
				</view>
			</view>
			<view class="select-item-box">
				<view class="price-title"></view>
				<view class="show-int-num">积分剩余：{{info.integralNum || 0}}</view>
			</view>
		</view>
		<view style="width: 750rpx;height: 170rpx;"></view>
		<!-- 底部菜单 -->
		<view @click="submitOrder()" class="bottom-box">
			<view class="button-text">立即支付 {{payMoney}}元</view>
		</view>
		<!-- 选择优惠券 -->
		<coupon-list :showList="showCoupon" :couponList="info.couponList" @closeSelect='closeSelect' @selectCoupon='toSelectCoupon' ref="coupon"></coupon-list>
	</view>
</template>

<script>
	import CouponList from "./components/CouponList.vue";
	export default {
		components: {CouponList},
		data() {
			return {
				sceneStr: '',
				isLogined: uni.getStorageSync("token"),
				isShow: true,
				onlineOrderNo:'', // 二维码单号
				invitorCode:'', // 邀请码
				info:{
					goodsList: [
						{
							goodsImg: "",
							goodsName: "",
							goodsNo: 0,
							goodsNumber: 0,
							goodsUnit: "",
							paidinPrice: 0,
							salePrice: 0,
							unitPrice: 0
						}
					],
					qrcodeNo: "",
					tolCollectedMoney: 0
				},
				payMoney:0, // 应该支付的金额
				selectIntegral:'', // 填写的积分
				showCoupon: false,
				selectCouponData: '' // 选择的优惠券
			}
		},
		onLoad(option) {
			const sceneStr = decodeURIComponent(option.scene);
			//判断是否是扫描二维码
			if(sceneStr){
				this.sceneStr = sceneStr
				// 分割字符串
				let arr = sceneStr.split('_')
				this.onlineOrderNo = arr[0]
				this.invitorCode = arr[1]
			}
			// 判断链接后是否有参数
			/* if(option.onlineOrderNo){
				this.onlineOrderNo = option.onlineOrderNo
			} */
			if(!this.isLogined){
				this.login("impression");
				return
			}
			this.getInfo()
		},
		methods: {
			async login(event) {
			  try {
			    const code = await this.wxLogin();
			    const checkLoginRes = await this.$NoteApi.doRequest("get", "login", { code, requestCode: '' });
			    const { code: checkLoginCode, data, message } = checkLoginRes.data;
			    if (checkLoginCode == 0) {
			      uni.setStorageSync("userInfo", data);
			      uni.setStorageSync("token", data.token)
			      this.getInfo()
			    } else {
			      uni.showToast({
			        title: message,
			        icon: 'none'
			      })
			    }
			  } catch (error) {
			    uni.showToast({
			        title: error,
			        icon: 'none'
			      })
			  }
			},
			wxLogin() {
			  return new Promise((resolve, reject) => {
			    uni.login({
			      provider: 'weixin',
			      success: (loginRes) => {
			        resolve(loginRes.code)
			      },
			      fail: (error) => {
			        reject(error)
			      }
			    })
			  })
			},
			noLogin() {
			  this.isShow = false;
			},
			toLogin() { },
			// 获取订单详情
			getInfo(){
				let postData = {}
				postData.onlineOrderNo = this.onlineOrderNo
				this.$javaApiErp.doRequest("post",'/onlineOrder/customer/getOnlineOrderInfo',postData,'json').then(res=>{
					if(res.data.code === 0){
						this.info=res.data.data
						this.payMoney = res.data.data.tolCollectedMoney
						this.allIntegral = res.data.data.integralNum
					}else{
						let type = 2
						if(res.data.code === 30001){
							type = 1
						}
						uni.reLaunch({
							url:'/pages/payment/notice?type='+type+'&msg='+res.data.message + '&invitorCode=' + this.invitorCode,
						})
					}
				})
			},
			// 验证积分
			authIntegral(){
				if(this.info.integralNum < this.selectIntegral){
					uni.showToast({title:'积分余额不足',icon:"none",duration:5000})
					this.selectIntegral = 0
				}else{
					this.initMoney()
				}
			},
			// 重新计算输入金额
			initMoney(){
				let selectCoupon = this.selectCouponData.couponAmount?this.selectCouponData.couponAmount:0;
				let inputIntegral = this.selectIntegral?this.selectIntegral:0;
				let tempInfo = ((this.info.tolCollectedMoney - selectCoupon)*100 - inputIntegral)/100
				console.log(tempInfo)
				this.payMoney = tempInfo.toFixed(2)
				// 如果是负数 就等于0
				if(this.payMoney <= 0){
					this.payMoney = 0
				}
			},
			// 提交数据
			submitOrder(){
				if(this.info.integralNum < this.selectIntegral){
					uni.showToast({title:'积分余额不足',icon:"none",duration:5000})
					this.selectIntegral = 0
					return
				}
				let that = this
				let postData = {
					"onlineOrderNo": this.onlineOrderNo,
					"integralNum": this.selectIntegral?this.selectIntegral:0,
					"couponNo": this.selectCouponData.couponNo?this.selectCouponData.couponNo:''
				}
				that.$javaApiErp.doRequest("post", "/onlineOrder/customer/payOnlineOrder", postData,'json').then(res => {
					if(res.data.code == 0){
						// 判断是不是 0元支付
						if(res.data.data.package){
							this.toPay(res.data.data)
						}else{
							uni.showToast({
								icon: 'success',
								title: '支付成功'
							})
							that.goSuccess(res.data.data)
						}
					}else{
						uni.showToast({title:res.data.message,icon:"none",duration:5000})
					}
				})
			},
			// 调起支付
			toPay(payConfig){
				let _this = this
				uni.requestPayment({
					provider: 'wxpay',    //支付类型-固定值
					timeStamp: payConfig.timestamp, // 时间戳（单位：秒）
					nonceStr: payConfig.noncestr, // 随机字符串
					package: payConfig.package, // 固定值
					signType: payConfig.sign_type, //固定值
					paySign: payConfig.sign, //签名		
					success: function (res) {
						console.log('success:' + JSON.stringify(res));
						console.log("支付成功");
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
						_this.goSuccess(payConfig)
					},		
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
						console.log(err);
						uni.showToast({
							icon: 'none',
							title: '支付失败'
						})
					}
				});
			},
			// 跳转到订单成功页面
			goSuccess(payConfig) {
				uni.navigateTo({
					url:'/pages/payment/paySuccess?orderNo='+payConfig.onlineOrderNo,
				})
			},
			// 选择优惠券
			showSelectCoupon(){
				console.log(123)
				this.showCoupon = true
			},
			// 返回
			closeSelect(){
				this.showCoupon = false
			},
			// 确认选择优惠券
			toSelectCoupon(row){
				this.selectCouponData = row
				this.initMoney()
				this.showCoupon = false
			}
		}
	}
</script>

<style scoped>
	.container{
		background-color: #F1F1F1;
		width: 750rpx;
		min-height: 100vh;
	}
	.header-box{
		width: 750rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
		font-size: 38rpx;
		line-height: 53rpx;
		background-color: #ffffff;
		color: #333333;
		padding: 30rpx;
	}
	.header-img{
		width: 42rpx;
		height: 42rpx;
		margin-right: 20rpx;
	}
	/* 商品 */
	.item{
		margin: 30rpx;
		box-sizing: border-box;
		padding: 0rpx 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}
	.item-top{
		color: #666666;
		font-size: 36rpx;
		line-height: 50rpx;
		border-bottom: 2upx solid #F1F1F1;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.good{
		border-bottom: 2upx solid #F1F1F1;
	}
	.good-content{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding-top: 30upx;
	}
	.good-content .good-img{
		width: 160rpx;
		height: 160rpx;
		background: #D8D8D8;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}
	.good-info{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.good-title-box{
		display: flex;
		justify-content: space-between;
	}
	.good-title{
		font-size: 38rpx;
		color: #333333;
		font-weight: 400;
		line-height: 53rpx;
		overflow: hidden;
		max-width: 460rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}
	.good-info .good-price{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.good-danwei{
		font-size: 34rpx;
		color: #888888;
	}
	.good-price-value{
		font-size: 34rpx;
		color: #333333;
	}
	.good-num{
		text-align: end;
		font-size: 34rpx;
		color: #888888;
		padding-top: 20rpx;
	}
	.good-z-price{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 0;
	}
	.goods-price-title{
		font-size: 36rpx;
		color: #666666;
		line-height: 50rpx;
	}
	.goods-price-price{
		font-weight: 600;
		font-size: 40rpx;
		color: #5CAE77;
		line-height: 56rpx;
	}
	
	.price-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		margin: 0 30rpx 30rpx 30rpx;
		padding: 30rpx 24rpx;
		border-radius: 8rpx;
	}
	.price-title{
		font-size: 36rpx;
		font-weight: 500;
		color: #666666;
		line-height: 50rpx;
	}
	.price-num{
		font-weight: 500;
		color: #F33F02;
		line-height: 62rpx;
		font-size: 44rpx;
	}
	.bottom-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 0 50upx 0;
		z-index: 9;
	}
	.button-text{
		width: 686rpx;
		color: #ffffff;
		height: 98rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 44rpx;
		background-color: #5CAE77;
		border-radius: 14rpx;
	}
	.tc-button{
		width: 120upx;
		height: 42upx;
		line-height: 42upx;
		text-align: center;
		background: #28B57F;
		border-radius: 0px 4upx 4upx 0px;
		color: #ffffff;
	}
	.select-item-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 24rpx 0;
		border-radius: 8rpx;
	}
	.mail-num-text{
		font-size: 36rpx;
		color: #333333;
	}
	.input-box{
		display: flex;
		align-items: center;
	}
	.info-input-border{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 380upx;
		height: 75rpx;
		padding-left: 10upx;
		border: 1upx solid #dcdfe6;
	}
	.select-icon-box{
		display: flex;
		align-items: center;
		color: #888888;
	}
	.select-icon{
		width: 36upx;
		height: 36upx;
	}
	.show-int-num{
		text-align: end;
		font-size: 34rpx;
		color: #888888;
	}
</style>
